<template>
  <div class="emp">
    <div class="my-nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>员工信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="my-query">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="query"
        :rules="queryRules"
        size="mini"
      >
        <el-form-item label="状态">
          <el-select
            v-model="query.e_status"
            style="width: 128px"
            @change="getPage(1)"
          >
            <el-option label="全部" value></el-option>
            <el-option label="未确定" value="0"></el-option>
            <el-option label="在职" value="1"></el-option>
            <el-option label="已离职" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="query.d_id"
            style="width: 128px"
            @change="getPage(1)"
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="dep in depList"
              :key="dep.d_id"
              :label="dep.d_name"
              :value="dep.d_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="query.e_sex"
            style="width: 128px"
            @change="getPage(1)"
          >
            <el-option label="全部" value></el-option>
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工号">
          <el-input v-model="query.e_id" style="width: 128px"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="query.e_name" style="width: 128px"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="query.e_remark" style="width: 128px"></el-input>
        </el-form-item>

        <el-form-item label="出生日期">
          <el-date-picker
            v-model="query.e_birth_start"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            style="width: 128px"
          ></el-date-picker>
          <span
            style="
              display: inline-block;
              width: 20px;
              text-align: center;
              color: #bbbbbb;
            "
            >-</span
          >
          <el-date-picker
            v-model="query.e_birth_end"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            style="width: 128px"
          ></el-date-picker>
        </el-form-item>

        <div style="display: inline-block">
          <el-form-item label="月薪" prop="e_sal_start">
            <el-input
              v-model.number="query.e_sal_start"
              style="width: 128px"
              placeholder="最低月薪"
            ></el-input>
          </el-form-item>
          <span
            style="
              display: inline-block;
              width: 15px;
              text-align: left;
              color: #bbbbbb;
              height: 28px;
              line-height: 28px;
            "
            >-</span
          >
          <el-form-item prop="e_sal_end">
            <el-input
              v-model.number="query.e_sal_end"
              style="width: 128px"
              placeholder="最高月薪"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click.prevent="getPage(1)">
            <i class="fa fa-search"></i> 查询
          </el-button>
          <el-button
            v-if="query.e_status === '0'"
            @click="openAddDialog"
            type="primary"
            icon="el-icon-plus"
            >新增</el-button
          >
          <el-button
            v-if="query.e_status === '0'"
            type="danger"
            icon="el-icon-delete"
            @click="execDeleteMulti"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="my-data">
      <el-table
        :data="page.rows"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="e_id" label="工号"></el-table-column>
        <el-table-column prop="e_name" label="姓名" width="130">
          <template slot-scope="scope">
            <img
              v-if="scope.row.e_photo"
              :src="
                $baseUrl +
                'info/emp/photo?_t=' +
                new Date().getTime() +
                '&e_id=' +
                scope.row.e_id
              "
              style="
                height: 30px;
                width: 30px;
                vertical-align: middle;
                border-radius: 15px;
                margin-right: 5px;
              "
            />
            <span style="vertical-align: middle">{{ scope.row.e_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="e_sex" label="性别"></el-table-column>
        <el-table-column prop="e_birth" label="出生日期"></el-table-column>
        <el-table-column prop="e_sal" label="月薪"></el-table-column>
        <el-table-column prop="d_name" label="部门"></el-table-column>
        <el-table-column prop="e_remark" label="备注"></el-table-column>
        <el-table-column prop="e_status_name" label="状态"></el-table-column>

        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.e_status === 0"
              size="small"
              @click="openEditDialog(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.e_status === 0"
              size="small"
              type="danger"
              @click="execDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.e_status === 0"
              size="small"
              @click="confirmData(scope.row)"
              >确定</el-button
            >
            <el-button
              v-if="scope.row.e_status !== 2"
              size="small"
              type="primary"
              @click="openPhotoDialog(scope.row)"
              >上传头像</el-button
            >
            <el-button
              v-if="scope.row.e_status === 1"
              size="small"
              @click="quit(scope.row)"
              >离职</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="my-page">
      <el-pagination
        :page-size.sync="query.pageSize"
        :current-page.sync="query.pageNum"
        layout="sizes, prev, pager, next, jumper, ->, total"
        :total="page.total"
        :page-sizes="[3, 5, 10, 15, 20, 30]"
        @size-change="getPage(1)"
        @current-change="getPage(query.pageNum)"
      ></el-pagination>
    </div>

    <!-- 新增窗口 -->
    <el-dialog
      title="新增员工"
      :append-to-body="true"
      :visible.sync="dialogAddVisible"
      @close="resetAddForm"
    >
      <!-- 通过ref属性给表单对象起个名字，在vue编程可以通过这个名字获得表单对象 -->
      <el-form ref="addForm" :model="addObj" size="mini">
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="addObj.e_name" style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="员工性别" :label-width="formLabelWidth">
          <el-radio v-model="addObj.e_sex" label="男">男</el-radio>
          <el-radio v-model="addObj.e_sex" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="addObj.e_birth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="addObj.d_id">
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="item in depList"
              :key="item.d_id"
              :label="item.d_name"
              :value="item.d_id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="月薪" :label-width="formLabelWidth">
          <el-input
            v-model.number="addObj.e_sal"
            style="width: 220px"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="addObj.e_remark"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="execAdd">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 编辑窗口 -->
    <el-dialog
      title="编辑员工"
      :append-to-body="true"
      :visible.sync="dialogEditVisible"
    >
      <!-- 通过ref属性给表单对象起个名字，在vue编程可以通过这个名字获得表单对象 -->
      <el-form ref="editForm" :model="editObj">
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="editObj.e_name" style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="员工性别" :label-width="formLabelWidth">
          <el-radio v-model="editObj.e_sex" label="男">男</el-radio>
          <el-radio v-model="editObj.e_sex" label="女">女</el-radio>
        </el-form-item>

        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="editObj.e_birth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="editObj.d_id">
            <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="item in depList"
              :key="item.d_id"
              :label="item.d_name"
              :value="item.d_id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="月薪" :label-width="formLabelWidth">
          <el-input
            v-model.number="editObj.e_sal"
            style="width: 220px"
          ></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="editObj.e_remark"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="execEdit">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 上传头像窗口 -->
    <el-dialog
      title="上传头像"
      :append-to-body="true"
      :visible.sync="dialogPhotoVisible"
    >
      <el-upload
        class="my-uploader"
        :action="$baseUrl + 'info/emp/photo'"
        :data="{ e_id: uploadEmp.e_id }"
        :show-file-list="false"
        :on-success="uploadPhotoSuccess"
        :with-credentials="true"
        :headers="{ 'X-Requested-With': 'XMLHttpRequest' }"
      >
        <img v-if="photoUrl" :src="photoUrl" class="my-photo" />
        <i v-else class="el-icon-plus my-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { $myGet, $myPost, $myPut, $myDelete, $get, $post } from "@/util/req2";
import {} from "@/api/info/emp";
export default {
  data() {
    const checkNum = (rule, value, callback) => {
      if (!value) {
        //未填数据
        return callback(); //自定义验证规则中，返回 callback()表示没有错误
      } else if (!Number.isInteger(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };

    return {
      //验证规则
      queryRules: {
        e_sal_start: [{ validator: checkNum, trigger: "blur" }],
        e_sal_end: [{ validator: checkNum, trigger: "blur" }],
      },
      //查询参数
      query: {
        e_status: "0",
        d_id: "",
        e_sex: "",
        pageSize: 5, //每页记录数
        pageNum: 1, //页码
      },

      depList: [],
      /* list:[],//员工清单 */
      page: {}, //分页数据

      formLabelWidth: "100px",
      dialogAddVisible: false,
      addObj: {
        d_id: "",
      }, //新增员工数据

      dialogEditVisible: false,
      editObj: {}, //编辑员工数据

      selections: [], //当前选中的数据

      dialogPhotoVisible: false,
      uploadEmp: {}, //正在上传头像的员工
      photoUrl: "", //刚刚上传成功后的图片地址
    };
  },

  methods: {
    //获取部门信息
    getDepList() {
      $myGet("info/emp/dep").then((data) => {
        this.depList = data;
      });
    },

    //获取当前页数据
    getPage(pageNum) {
      this.$refs["queryForm"].validate((ok) => {
        if (ok) {
          this.query.pageNum = pageNum;
          $myGet("info/emp", { params: this.query }) //对axios的封装
            .then((data) => {
              this.page = data;

              //使用服务器返回的正确数据覆盖分页参数
              this.query.pageSize = this.page.pgSize;
              this.query.pageNum = this.page.curr;
            });
        } else {
          this.$message.error("查询条件不正确！");
        }
      });
    },

    //打开新增窗口
    openAddDialog() {
      this.dialogAddVisible = true;
    },

    //执行新增
    execAdd() {
      this.$confirm("您确定新增该员工信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //以payload格式传参
          $myPost("info/emp", this.addObj).then(() => {
            this.dialogAddVisible = false; //关闭新增窗口
            this.getPage(this.page.last + 1); //展示最后一页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //重置Add表单
    resetAddForm() {
      //console.log("====>resetAddForm");
      //console.log(this.$refs['addForm']);
      //this.$refs['addForm'].resetFields();
      this.addObj = {
        d_id: "",
      };
    },

    //打开编辑窗口
    openEditDialog(oldEmp) {
      this.editObj = { ...oldEmp }; //将oldEmp对象的属性依次赋值于this.editObj对象
      this.dialogEditVisible = true;
    },

    //执行编辑
    execEdit() {
      this.$confirm("您确定修改该员工信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //以payload格式传参
          $myPut("info/emp", this.editObj).then(() => {
            this.dialogEditVisible = false; //关闭新增窗口
            this.getPage(this.page.curr); //展示当前页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //执行删除
    execDelete(oldEmp) {
      this.$confirm("您确定删除员工" + oldEmp.e_name + "信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $myDelete("info/emp/" + oldEmp.e_id).then(() => {
            this.getPage(this.page.curr); //展示当前页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //处理选项框改变,参数为当前选项
    handleSelectionChange(selections) {
      this.selections = selections;
    },

    //执行多删除
    execDeleteMulti() {
      if (this.selections.length == 0) {
        this.$message.error("您没有选择任何数据！");
        return;
      }

      //将所有选项的id放到一个数组中
      let ids = [];
      for (let i = 0; i < this.selections.length; i++) {
        ids.push(this.selections[i].e_id);
      }

      this.$confirm("您确定删除选中的员工信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //payload格式传参
          this.$myDelete("info/emp/", { data: ids }).then(() => {
            this.getPage(this.page.curr); //展示当前页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //确定员工数据
    confirmData(emp) {
      this.$confirm("您确实要确定员工数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $myPut("info/emp/cfm/" + emp.e_id).then(() => {
            this.getPage(this.page.curr); //展示当前页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //员工离职
    quit(emp) {
      this.$confirm("您确定该员工状态更新为离职吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $myPut("info/emp/quit/" + emp.e_id).then(() => {
            this.getPage(this.page.curr); //展示当前页数据
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作！",
          });
        });
    },

    //打开上传头像窗口
    openPhotoDialog(emp) {
      this.photoUrl = ""; //清除当前图片地址
      this.uploadEmp = emp;
      this.dialogPhotoVisible = true;
    },

    //上传头像成功后执行的函数，res表示服务器的响应数据
    uploadPhotoSuccess(result) {
      this.getPage(this.page.curr);
      this.photoUrl =
        this.$baseUrl +
        "info/emp/photo?_t=" +
        new Date().getTime() +
        "&e_id=" +
        this.uploadEmp.e_id;
      this.$message.success(result.message);
    },
  },
  mounted() {
    this.getDepList();
    this.getPage(1);
  },
};
</script>

<style scoped>
.emp {
  position: relative;
  height: 100%;
}
.my-nav {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 15px;
}
.my-query {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 30px;
  height: 85px;

  text-align: left;
}
.my-data {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 120px;
  bottom: 40px;

  /* overflow: auto;超出范围自动出现滚动条 */
}
.my-page {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;

  height: 32px;
  text-align: left;
}

.my-uploader {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: dashed 1px #dddddd;

  margin: 0 auto; /* 左右居中 */
}

.my-uploader:hover {
  border: dashed 1px #11aa22;
}

.my-icon {
  font-size: 30px;
  color: #aaaaaa;
}

.my-photo {
  width: 200px;
  height: 200px;
}
</style>